<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrapper {
            width: 600px;
            margin: 50px auto;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        .nav li+li {
            border-left: 0;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="nav">
            <li>nav_01</li>
            <li>nav_02</li>
            <li>nav_03</li>
            <li>nav_04</li>
            <li>nav_05</li>
            <li>nav_06</li>
        </ul>
    </div>
</body>
<script>
    var navItems = document.querySelectorAll(".nav li");
    console.log(navItems);

    // 给每一个li绑定事件 => 打印元素的内容和下标
    // navItems[0].onclick = function () { }
    // navItems[1].onclick = function () { }
    // navItems[2].onclick = function () { }
    // navItems[3].onclick = function () { }
    // navItems[4].onclick = function () { }
    // navItems[5].onclick = function () { }

    // 多元素绑定事件的问题:
    // 1. 页面加载时只是绑定了事件,事件并不执行 => 页面加载完毕 全局的 li:<li>nav_06</li>    i: 6
    // 2. 点击li -> 触发事件 -> 执行函数 -> 函数作用域中没有li和i -> 找父作用域(全局作用域中)的li和i => li:<li>nav_06</li>    i: 6

    // 事件的机制机制
    // 1. 浏览器在页面加载时,绑定事件
    // 2. 浏览器监听用户点击行为 -> 触发事件(执行绑定的函数)

    // 解决方法2:
    // 分析问题后发现: 有部分原因在于事件中的li和i自己没有 => 向外跳一层找全局作用域 (全局的li和i)=> 有没有什么方法 让它们找循环当前的li和i 

    // 解决方法: 在遍历绑定事件时,嵌套一层函数作用域 
    // 遍历伪数组 => 执行对应的函数(6次) -> 对应下标获取元素,绑定事件(6次)

    // debugger;  //加载时执行
    for (var i = 0; i < navItems.length; i++) {
        function fn(i) { //形参i
            console.log(i); // 0 1 2 3 4 5
            var li = navItems[i];  // 遍历每一个li
            li.onclick = function () { // 给li绑定事件 => 点击时执行(页面加载时不执行)
                // 点击li -> 触发事件 -> 执行函数 -> 函数作用域中没有li和i -> 找父作用域(函数fn作用域中)的li和i => li:<li>nav_06</li>    i: 6

                debugger; //点击时执行
                console.log(li.textContent, i);
            }
        }

        fn(i); //实参i
    }

    console.log("页面加载完毕", i);//  全局i:  => 6




</script>

</html>